<template>
  <el-card shadow="never" class="layout" style="width: 100%">
    <div class="pre">
      <div class="pre_title">
        <span class="title-text">
          <el-popover placement="top-start" trigger="hover" content="参与当前活动的人（包含客户）的区域">
            <template #reference>
              <div class="title"> {{ props.title }} <img class="help_icon" src="@/assets/image/customer/help_icon.png" alt="" /></div>
            </template>
          </el-popover>
        </span>
        <el-button @click="export2Img(myRef_one, props.title)" :disabled="!isNoMessage1">导出</el-button>
      </div>
      <div class="cust_qs">
        <el-radio-group v-model="custId" @change="changeId">
          <el-radio-button v-for="item in props.btnList" :key="item.id" :label="item.id">{{ item.text }}</el-radio-button>
        </el-radio-group>
      </div>
      <div class="min" ref="myRef_one" id="echarts"></div>
      <!-- <div class="min" v-show="isNoMessage1" ref="myRef_one" id="echarts"></div> -->
      <!-- <div class="no_data" v-show="!isNoMessage1">
        <img class="no_img" src="@/assets/noData.png" alt="" />
        <div class="no_title">暂无数据</div>
      </div> -->
    </div>
  </el-card>
</template>

<script lang="ts" setup>
  import { ref, inject, nextTick, watch } from 'vue'
  import { export2Img } from '@/utils/utils'
  import chinaJSON from '@/assets/js/china.json'
  // import  '@/assets/js/china.js';
  let echarts = inject('ec')
  const myRef_one = ref()
  const isNoMessage1 = ref(false)
  const emit = defineEmits(['changeType'])
  const props = defineProps(['title', 'browseData'])
  const getEcharts2 = (data: any) => {
    if (data.length <= 0) {
      isNoMessage1.value = false
      // return
    } else {
      isNoMessage1.value = true
    }
    let myChart_one = echarts.init(myRef_one.value)
    echarts.registerMap('china', chinaJSON) //注册可用的地图
    myChart_one.setOption({
      series: [
        {
          name: props.title,
          type: 'map',
          map: 'china',
          geoIndex: 0,
          top: 100,
          zoom: 1.6, // 当前视角的缩放比例（地图的放大比例）
          roam: true, // 是否开启鼠标缩放和平移漫游
          label: {
            show: true,
            formatter({ data }: any) {
              return data?.value || ''
            }
          },
          itemStyle: {
            borderColor: '#E6824A',
            areaColor: '#F5F5F5'
          },
          data
        }
      ],
      tooltip: {
        // 鼠标移到图里面的浮动提示框
        // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
        formatter(params, ticket, callback) {
          // params.data 就是series配置项中的data数据遍历
          let localValue, perf, downloadSpeep, usability, point
          if (params.data) {
            localValue = params.data.value
          } else {
            // 为了防止没有定义数据的时候报错写的
            localValue = 0
          }
          let htmlStr = `
	             <div style='font-size:18px;'> ${params.name}</div>
	             <p style='text-align:left;margin-top:10px;'>
	               区域对应数据：${localValue}<br/>
	             </p>
	           `
          return htmlStr
        },
        backgroundColor: '#5CCEA6', //提示标签背景颜色
        textStyle: { color: '#fff' } //提示标签字体颜色
      },
      // visualMap的详细配置解析：https://echarts.baidu.com/option.html#visualMap
      visualMap: {
        // 左下角的颜色区域
        type: 'piecewise', // 定义为分段型 visualMap
        min: 0,
        max: 1000,
        itemWidth: 40,
        bottom: 10,
        left: 10,
        pieces: [
          // 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，
          // 以及每一段的文字，以及每一段的特别的样式
          { gt: 999, label: '>1000人', color: '#FF682E' }, // (1000, ]
          { gt: 100, lte: 999, label: '100-999人', color: '#FFAA89' }, // (100, 999]
          { gt: 10, lte: 99, label: '10-99人', color: '#FFD57D' }, // (10, 99]
          { gt: 0, lte: 9, label: '1-9人', color: '#FFE5DC' } // (0, 9]
        ]
      }
    })

    window.addEventListener('resize', function () {
      //执行
      if (myChart_one) {
        // 判断一下，防止在初始化的时候报错，cannot read property 'resize' of null
        myChart_one.resize()
      }
    })
  }
  const changeId = () => {
    emit('changeType', custId.value)
  }
  watch(
    () => props.browseData,
    (val) => {
      console.log(val, '中国地图数据')
      getEcharts2(val)
    }
  )
</script>

<style lang="scss" scoped>
  .layout {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    :deep .el-card__body {
      width: 100%;
      box-sizing: border-box;
    }
    .help_icon {
      vertical-align: baseline;
      margin-left: 8px;
      width: 14px;
    }
    .pre {
      height: 546px;
      box-sizing: border-box;
      background: #ffffff;
      margin-bottom: 1%;
      &_title {
        // width: 100%;
        padding-bottom: 14px;
        border-bottom: 1px solid #eaeaea;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 9999;
        font-size: 16px;
      }
      .title-text {
        line-height: 38px;
      }
      .min {
        width: 39vw;
        height: 400px;
        margin: 0 auto;
      }
    }
    .no_data {
      height: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .no_img {
        margin-left: 24px;
      }
      .no_title {
        color: #909399;
        font-size: 14px;
      }
    }
    .cust_qs {
      margin: 20px 0px;
    }
  }
</style>
